{% extends 'common_project_tpl.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.min.css'%}">
    <style>
        .title-list ul{
            padding-left: 15px;
        }
        .title-list ul a{
            display: block;
            padding: 5px 0;
        }
        .title-list {
            border-right: 1px solid #dddddd;
            min-height: 500px;
        }

        .content {
            border-left: 1px solid #dddddd;
            min-height: 600px;
            margin-left: -1px;
        }

        .panel-body {
            padding: 0px;
        }

        .panel-default .panel-heading {
        {# 弹性盒子，指定主轴方向为行对齐，对齐方式，两端对齐#} display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .editormd-fullscreen{
            z-index: 1001;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid" STYLE="margin-top: 20px;">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div><h3 class="panel-title"><i class="fa fa-book" aria-hidden="true"/></i> Wiki 文档 </h3></div>
                <div class="function">
                    <a href="{% url 'main:wiki_add' pro_id %}" type="button" class="btn btn-success btn-xs">
                        <i class="fa fa-plus-circle" aria-hidden="true"/></i> 新建
                    </a>
                </div>
            </div>
            <div class="panel-body">
                <div class="col-lg-3 title-list">
                    <ul id="wiki-title"></ul>
                </div>
                <div class="col-lg-9 content">
                    <form id="wiki">
                        {% csrf_token %}
                        {% for item in form %}
                            {% if item.name == "content" %}
                                <div class="form-group">
                                    <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                                    <div id="editor">
                                        {{ item }}
                                    </div>
                                    <span class="error-msg"></span>
                                </div>
                            {% else %}
                                <div class="form-group">
                                    <label for="{{ item.id_for_label }}">{{ item.label }}</label>
                                    {{ item }}
                                    <span class="error-msg"></span>
                                </div>
                            {% endif %}
                        {% endfor %}
                        <button id="add" type="button" class="btn btn-primary">提交</button>
                        <span id="non_field_errors" class="error-msg col-md-11"></span>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="wiki-detail-temp" style="display: none;">{% url 'main:wiki_show' project=pro_id wiki_id=1%}</div>
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/editor-md/editormd.min.js' %}"></script>
    <script>
        $(function () {
            showWikiList();
            addWiki();
            initEditorMd();
        });

        function addWiki() {
            $('#add').click(function () {
                $('.error-msg').empty();
                {#收集已经输入的表单数据#}
                let data = {};
                let form_data = $("#wiki").serializeArray(); // 会自动携带csrftoken，并手机表单中的所有input框数据
                $.each(form_data, function () {
                    data[this.name] = this.value; // 这里this对象，指代遍历form_data中每个元素对象
                });
                data['project'] = {{ pro_id }};
                {#console.log(data)#}
                {% if wiki_id %}
                    $.ajax({
                        url: "{% url 'main:wiki-detail' pk=wiki_id %}",
                        type: "put",
                        headers: {
                            'X-CSRFTOKEN': $("[name='csrfmiddlewaretoken']").val()
                        },
                        data: data,
                        dataType: "JSON",
                        success: function (res) {
                            if (res.ret === 0) {
                                location.href = "{% url 'main:wiki_show' project=pro_id wiki_id=wiki_id %}";
                            } else { //循环此字典每次循环执行函数
                                $.each(res.errors, function (name, data) {
                                    $('#id_' + name).next().text(data[0])
                                    console.log(name)
                                    if (name === 'non_field_errors') {
                                        $('#non_field_errors').text(data[0])
                                    }
                                })
                            }
                        }
                    })
                {% else %}
                    $.ajax({
                        url: "{% url 'main:wiki-list' %}",
                        type: "post",
                        data: data,
                        dataType: "JSON",
                        success: function (res) {
                            if (res.ret === 0) {
                                location.href = "{% url 'main:wiki' project=pro_id %}";
                            } else { //循环此字典每次循环执行函数
                                $.each(res.errors, function (name, data) {
                                    $('#id_' + name).next().text(data[0])
                                    console.log(name)
                                    if (name === 'non_field_errors') {
                                        $('#non_field_errors').text(data[0])
                                    }
                                })
                            }
                        }
                    })
                {% endif %}
            })
        }
        function showWikiList() {
            $.ajax({
                url: "{% url 'main:wiki-list' %}",
                type: "get",
                data: {
                    project:{{ pro_id }}
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.ret===0){
                        $.each(res.data, function (index, item) {
                        let url_temp = $('#wiki-detail-temp').text()
                        let detail_url = url_temp.replace('/wiki/1',`/wiki/${item.id}`)
                        let htmlCode = `
                        <li id="${item.id}"><a href="${detail_url}">${item.title}</a><ul></ul></li>
                        `
                        if (item.parent) {
                                $(`#${item.parent} > ul`).append(htmlCode)
                        } else {
                                $('#wiki-title').append(htmlCode)
                        }
                    })
                    }else {
                        alert("获取wiki列表失败"+ res.errors)
                    }
                    console.log(res)

                }
            })
        }

        function initEditorMd() {
          editormd('editor',{
            placeholder: "请输入wiki内容",
            height:500,
            path: "{% static 'plugins/editor-md/lib/' %}",
            // 上传图片的开关
            imageUpload:true,
            // 上传图片允许格式
            imageFormats:["jpg",'jpeg','png','gif'],
            // 上传图片的接口，会自动向该接口发送post请求，已经在组件中封装好了
            imageUploadURL:"{% url 'main:api_wiki_upload' project=pro_id %}"+'?project='+{{ pro_id }},
            flowChart : true,
            emoji : true,
          })
        }
    </script>
{% endblock %}